<template>
  <div>
    <h1>医疗机构管理</h1>
    <div class="actions">
      <el-button type="primary" round plain @click="dialog.visible = true">新增机构</el-button>
    </div>
    <el-divider></el-divider>

    <el-table :data="business.businessList">
      <el-table-column prop="id" label="序号" min-width="60"></el-table-column>
      <el-table-column prop="logo" label="机构logo" min-width="120">
        <template v-slot="{ row }">
          <img :src="baseUrl + row.logo" style="height: 80px;width: 80px;" alt="">
        </template>
      </el-table-column>

      <el-table-column prop="title" label="机构名称" min-width="120"></el-table-column>
      <el-table-column prop="legal_person" label="负责人" min-width="80"></el-table-column>
      <el-table-column prop="phone" label="联系电话" min-width="120"></el-table-column>
      <el-table-column prop="province" label="省份" min-width="100"></el-table-column>
      <el-table-column prop="city" label="城市" min-width="100"></el-table-column>
      <el-table-column prop="county" label="区县" min-width="100"></el-table-column>
      <el-table-column prop="address" label="详细地址" min-width="100"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.status === 1">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="180">
        <template v-slot="{ row }">
          <el-space>
            <el-button @click="edit(row)" type="primary" plain size="small" round>编</el-button>
            <el-button @click="del(row.id)" type="danger" plain size="small" round>删</el-button>
            <router-link :to="{ name: 'staff', query: { bus_id: row.id } }">
              <el-button type="success" plain size="small" round>医</el-button>
            </router-link>
            <router-link :to="{ name: 'banner', query: { bus_id: row.id } }">
              <el-button type="success" plain size="small" round>图</el-button>
            </router-link>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- {{ state.role }} -->
    <el-pagination @size-change="sizeChange" :page-sizes="[2, 5, 10, 15, 20]" @current-change="pageChange" background
      layout="pre,pager,next,sizes,jumper" :total="business.businessTotal" v-model:page-size="size"></el-pagination>
    <BusinessDialog ref="dialog" @updateBusiness="updateBusiness" />
  </div>
</template>

<script setup>
import BusinessDialog from './BusinessDialog.vue'
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { businessRemove } from '../../utils/api'
const store = useStore()
const { dispatch, state: { business } } = store
const dialog = ref(null)
const page = ref(1)
const size = ref(2)
// 自定义事件getRoleTotalAction的处理函数
const updateBusiness = () => {
  dispatch('business/getBusinessListAction', { page: page.value, size: size.value })
  dispatch('business/getBusinessTotalAction')
}
onMounted(() => {
  updateBusiness()
})

const pageChange = (num) => {
  page.value = num
  // 重新发送请求
  dispatch('business/getBusinessListAction', { page: page.value, size: size.value })
}
const sizeChange = (num) => {
  size.value = num
  // 重新发送请求
  dispatch('business/getBusinessListAction', { page: page.value, size: size.value })
}
const edit = (row) => {
  dialog.value.visible = true
  dialog.value.getEditData(row)
}

const del = (id) => {
  ElMessageBox.confirm('确认删除', '确认提示', { type: 'warning' }).then(async () => {
    const { data } = await businessRemove(id)
    ElMessage({ message: data.msg, type: data.code === 200 ? 'success' : 'error' })
    if (data.code === 200) {
      updateBusiness()
    }
  }).catch(() => null)
}
</script>

<style></style>